<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			table.grid{
				width: 100%;
			    border: none;
			    background-color: #F6F4F0;
			    padding: 0px;
			}
			table tr{border: 1px red solid;text-align: center;}
		</style>
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>

<h1>栅格得自适应</h1>

<div class="container-fluid col-md-12 col-sm-12 col-lg-12 col-xs-12" >
	<div class="row">
		<div class="col-sm-12 col-md-3 col-lg-4 col-xs-4 form-inline" role="form"
			<label>年份:</label>
			<select class="form-control">
				<option>2018</option><option>2017</option><option>2016</option>
			</select>
		</div>
		<div class="col-sm-12 col-md-3 col-lg-4 col-xs-4">
			<button class="btn btn-primary">查询</button>
		</div>
		<div class="col-sm-12 col-md-3 col-lg-4 col-xs-4">
			<div class="row col-md-6 col-sm-6 col-lg-6 col-xs-6">&lt;</div>
			<div class="row col-md-6 col-sm-6 col-lg-6 col-xs-6" >&gt;</div>
		</div>
	</div>
</div>
<div class="row-fluid col-md-12 col-sm-12 col-lg-12 col-xs-12">
	<div class="row col-md-4 col-sm-4 col-lg-4 col-xs-4 form-inline" role="form" >
		<label>年份:</label>
		<select class="form-control">
			<option>2018</option><option>2017</option><option>2016</option>
		</select>
	</div>
	<div class="row col-md-4 col-sm-4 col-lg-4 col-xs-4">
		<button class="btn btn-primary">查询</button>
	</div>
	<div class="row-fluid col-md-4 col-sm-4 col-lg-4 col-xs-4">
		<div class="row col-md-6 col-sm-6 col-lg-6 col-xs-6">&lt;</div>
		<div class="row col-md-6 col-sm-6 col-lg-6 col-xs-6" >&gt;</div>
	</div>
</div>

<h1>Bootstrap 网格系统</h1>
	<table class="grid" cellspacing="0" border="1px" >
	<tbody><tr>
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>		
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>		
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>		
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>
	  <td width="8.33%">1</td>		
	  <td width="8.33%">1</td>
	</tr>
	<tr>
	  <td colspan="4">4</td>
	  <td colspan="4">4</td>		
	  <td colspan="4">4</td>
	</tr>
	<tr>
	  <td colspan="4">4</td>
	  <td colspan="8">8</td>		
	</tr>
	<tr>
	  <td colspan="6">6</td>
	  <td colspan="6">6</td>		
	</tr>
	<tr>
	  <td colspan="12">12</td>
	</tr>
	</tbody></table>

> Bootstrap 网格系统（Grid System）的工作原理:<br/>
> 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：<br/>
> 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。<br/>
> 使用行来创建列的水平组。<br/>
> 内容应该放置在列内，且唯有列可以是行的直接子元素。<br/>
> 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。<br/>
> 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。<br/>
> 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。	<br/>


<pre>
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
</pre>

<p>我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。</p>
<pre>
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
</pre>
<p>
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
让我们来看下面这行代码：
</p>
<pre>
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
</pre>
<p>对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。</p>
<h1>网格选项</h1>
<p>下表总结了 Bootstrap 网格系统如何跨多个设备工作：</p>
<table class="table table-bordered">
<tbody><tr><th></th><th>超小设备手机（&lt;768px）</th><th>小型设备平板电脑（≥768px）</th><th>中型设备台式电脑（≥992px）</th><th>大型设备台式电脑（≥1200px）</th></tr>
<tr><td>网格行为</td><td>一直是水平的</td><td>以折叠开始，断点以上是水平的</td><td>以折叠开始，断点以上是水平的</td><td>以折叠开始，断点以上是水平的</td></tr>
<tr><td>最大容器宽度</td><td>None (auto)</td><td>750px</td><td>970px</td><td>1170px</td></tr>
<tr><td>Class 前缀</td><td><b>.col-xs-</b></td><td><b>.col-sm-</b></td><td><b>.col-md-</b></td><td><b>.col-lg-</b></td></tr>
<tr><td>列数量和</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>最大列宽</td><td>Auto</td><td>60px</td><td>78px</td><td>95px</td></tr>
<tr><td>间隙宽度</td><td>30px<br>（一个列的每边分别 15px）</td><td>30px<br>（一个列的每边分别 15px）</td><td>30px<br>（一个列的每边分别 15px）</td><td>30px<br>（一个列的每边分别 15px）</td></tr>
<tr><td>可嵌套</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
<tr><td>偏移量</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
<tr><td>列排序</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
</tbody></table>
	
<h1>基本的网格结构</h1>
<p>
下面是 Bootstrap 网格的基本结构：
</p>
<pre>
&lt;div class="container"&gt;
   &lt;div class="row"&gt;
      &lt;div class="col-*-*"&gt;&lt;/div&gt;
      &lt;div class="col-*-*"&gt;&lt;/div&gt;      
   &lt;/div&gt;
   &lt;div class="row"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;....	
</pre>
	

</body>
	
</html>
